import React, { Component } from "react";
import { WingBlank, Flex } from "antd-mobile";
import "./index.scss";
class PrivateMsgShow extends Component {
  render() {
    const {
      houseTitle,
      houseTags,
      housePrice,
      houseRoomType,
      houseSize,
      houseOriente,
      houseFloor,
    } = this.props;

    return (
      <div className="PrivateMsgShowWrapper">
        <div className="content">
          <div className="title">
            <span>{houseTitle}</span>
          </div>
          <div className="smallLabel">
            {houseTags &&
              houseTags.map((one) => {
                return <div className="label">&ensp;{one}&ensp;</div>;
              })}
          </div>
        </div>
        <div className="content-two">
          <WingBlank>
            <Flex>
              <Flex.Item>
                <div className="item">
                  <div className="itemMsg">
                    {housePrice}
                    <span>/月</span>
                  </div>
                  <div className="itemName">价格</div>
                </div>
              </Flex.Item>
              <Flex.Item>
                <div className="item">
                  <div className="itemMsg">{houseRoomType}</div>
                  <div className="itemName">房型</div>
                </div>
              </Flex.Item>
              <Flex.Item>
                <div className="item">
                  <div className="itemMsg">
                    {houseSize}
                    <span>平米</span>
                  </div>
                  <div className="itemName">面积</div>
                </div>
              </Flex.Item>
            </Flex>
          </WingBlank>
        </div>
        <div className="content-three">
          <Flex wrap="wrap">
            <Flex.Item>
              <div className="smallMsg">
                <div className="smallMsg-name">装修：</div>
                <div className="smallMsg-msg">无数据</div>
              </div>
            </Flex.Item>
            <Flex.Item>
              <div className="smallMsg">
                <div className="smallMsg-name">朝向：</div>
                <div className="smallMsg-msg">{houseOriente}</div>
              </div>
            </Flex.Item>
          </Flex>
          <Flex wrap="wrap" align="center">
            <Flex.Item>
              <div className="smallMsg">
                <div className="smallMsg-name">楼层：</div>
                <div className="smallMsg-msg">{houseFloor}</div>
              </div>
            </Flex.Item>
            <Flex.Item>
              <div className="smallMsg">
                <div className="smallMsg-name">类型：</div>
                <div className="smallMsg-msg">无数据</div>
              </div>
            </Flex.Item>
          </Flex>
        </div>
        <div className="blankContent"></div>
      </div>
    );
  }
}

export default PrivateMsgShow;
